<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理系统</title>
<link type="text/css" href="__PUBLIC__/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function() {
	$("#accordion").accordion({ autoHeight: false });
	$(".selectable").selectable({ 
		tolerance: 'fit',
		selected:function(evt){
			$(".ui-selected", this).each(function(){
                alert($(this).html());
            });
		} 
	});
	
	$('#tabs').tabs();
});
</script>
<style>
body {font-size:12px;}
div{margin:0 0; padding:0 0;}
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.selectable { list-style-type: none; margin: 0; padding: 0; width: 100%; cursor:pointer;}
.selectable li { text-align:center;margin: 3px; padding: 2px; font-size: 12px; line-height:20px; height: 20px; }
</style>
</head>
<body>
	
<div class="ui-helper-reset ui-widget" style="width:860px;margin:0 auto;">
	<div id="top" class="ui-widget-content" style="margin:5px 0;">
		<h2>后台管理系统</h2>
	</div>
	<div id="main">
		<div id="left" style="width:200px;float:left;">	
		<div id="accordion">
			<h3><a href="#">微博管理</a></h3>
			<div>
				<ol class="selectable">
					<li class="ui-widget-content">微博列表</li>
					<li class="ui-widget-content">话题管理</li>
					<li class="ui-widget-content">图片管理</li>
				</ol>
			</div>
			<h3><a href="#">用户管理</a></h3>
			<div>
				<ol class="selectable">
					<li class="ui-widget-content">用户列表</li>
					<li class="ui-widget-content">用户群组</li>
					<li class="ui-widget-content">权限设置</li>
				</ol>
			</div>

			<h3><a href="#">模板设置</a></h3>
			<div>
				<ol class="selectable">
					<li class="ui-widget-content">菜单一</li>
					<li class="ui-widget-content">菜单二</li>
				</ol>			
			</div>
			<h3><a href="#">应用模块</a></h3>
			<div>
				<ol class="selectable">
					<li class="ui-widget-content">菜单一</li>
					<li class="ui-widget-content">菜单二</li>
				</ol>
			</div>
			<h3><a href="#">全局管理</a></h3>
			<div>
				<ol class="selectable">
					<li class="ui-widget-content">系统设置</li>
					<li class="ui-widget-content">后台菜单</li>
					<li class="ui-widget-content">缓存管理</li>
				</ol>
			</div>
		</div>
		</div>
		<div id="right" style="width:650px;height:600px;float:left;margin-left:5px;">
			<!-- Tabs -->

		<div id="tabs" class="ui-widget-content">

			<ul>
				<li><a href="#tabs-1">欢迎首页</a></li>
				<li><a href="#tabs-2">系统总概</a></li>
				<li><a href="#tabs-3">系统日志</a></li>
			</ul>
			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>

		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="footer" style="text-align:right;border-top:1px solid #ccc;margin-top:5px;">
		<p>Copyright By 7OUR.com</p>
	</div>
</div>
</body>
</html>